<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
    <!--引入zTree的css-->
    <link rel="stylesheet" href="js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
<div class="content_wrap" hidden="hidden">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <button onclick="closeLayer();">关闭layer</button>
</div>
<button onclick="openLayer();">弹出layer</button>
</body>
</html>
<!--引入layer之前需要引入jquery-->
<script src="js/jquery-3.2.1.js"></script>
<!--引入layer-->
<script src="js/layer/layer.js"></script>
<!--引入zTree-->
<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script>
    /*
    * 更详细的zTree属性配置可以去zTree官网查看
    * 地址：http://www.treejs.cn/v3/faq.php#_206
    */
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "level"
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    /*将数据拼接成如下格式*/
    var zNodes =[
        { id:1, pId:0, name:"can check 1", open:true},
        { id:11, pId:1, name:"can check 1-1", open:true},
        { id:111, pId:11, name:"no radio 1-1-1", nocheck:true},
        { id:112, pId:11, name:"can check 1-1-2"},
        { id:12, pId:1, name:"no radio 1-2", nocheck:true, open:true},
        { id:121, pId:12, name:"no radio 1-2-1"},
        { id:122, pId:12, name:"no radio 1-2-2"},
        { id:2, pId:0, name:"can check 2", checked:true, open:true},
        { id:21, pId:2, name:"can check 2-1"},
        { id:22, pId:2, name:"can check 2-2", open:true},
        { id:221, pId:22, name:"can check 2-2-1", checked:true},
        { id:222, pId:22, name:"can check 2-2-2"},
        { id:23, pId:2, name:"can check 2-3"}
    ];

    /*初始化zTree*/
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

    var index;  // 命名layer弹出层
    openLayer = function () {
        index = layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: $('.content_wrap')
        });
    }

    closeLayer = function () {
        // 关闭layer弹出层
        layer.close(index)
    }
</script>